<template>
    <div class="jx-index-container">
        <div class="jx-index-banner2" v-if="roles == undefined">
            <el-carousel height="370px" trigger="click">
                <el-carousel-item v-for="(item,index) in bannerList" :key="index">
                    <div class="banner2-content" :class="item.bg">
                        <div class="banner2-item" :class="item.item"></div>
                    </div>
                </el-carousel-item>
            </el-carousel>
            <!-- <img src="./../../assets/images/banner2.jpg" /> -->
        </div>
        <div class="jx-index-banner-info" v-else>
            <div class="mask" v-if="flag">
                <p><img src="./../../assets/images/choorm.png" /> 系统检测到您未使用谷歌内核浏览器，请使用谷歌内核浏览器打开该系统或者
                    <span class="downsPath" @click="downsPath"> 下载</span>
                    <i class="iconfont icon-Group- wrong" @click="flag =false"></i>
                </p>
            </div>
            <div class="jx-index-banner-info-box">
                <el-row v-if="roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER'">
                    <el-col :span="12">
                        <div class="jx-index-banner-content">
                            <div class="jx-index-banner-content-avatar fl">
                                <img :src="avatar" />
                            </div>
                            <div class="jx-index-banner-content-tips fl">{{ timeStr }}，{{ userName }}，祝你开心每一天！</div>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="jx-index-banner-text">
                            <div class="jx-index-banner-text-item">
                                <span>当前教授班级</span>
                                <p v-if="classesCount == 0" v-text="classesCount"></p>
                                <el-dropdown trigger="hover" v-if="classesCount > 0 && (roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER')">
                                    <span class="el-dropdown-link" v-text="classesCount"></span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item v-for="(item, index) in classesSelectArr" :key="index" @click.native="ChangeDrodown(1,item.id, item.courseId)">{{ item.name }}</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                            <div class="jx-index-banner-text-xian"></div>
                            <div class="jx-index-banner-text-item">
                                <span>待审批随堂练习</span>
                                <p v-if="unreviewedPracticeCount == 0" v-text="unreviewedPracticeCount"></p>
                                <el-dropdown trigger="hover" v-if="unreviewedPracticeCount > 0 && (roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER')">
                                    <span class="el-dropdown-link" v-text="unreviewedPracticeCount"></span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item v-for="(item, index) in unreviewedPracticeArr" :key="index" @click.native="ChangeDrodown(2,item.id, item.courseId,item.name,item.grade,item.status)">{{ item.name }}</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                            <div class="jx-index-banner-text-xian"></div>
                            <div class="jx-index-banner-text-item">
                                <span>待审批实验报告</span>
                                <p v-if="unreviewedReportCount == 0" v-text="unreviewedReportCount"></p>
                                <el-dropdown trigger="hover" v-if="unreviewedReportCount > 0 && (roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER')">
                                    <span class="el-dropdown-link" v-text="unreviewedReportCount"></span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item v-for="(item, index) in unreviewedReportArr" :key="index" @click.native="ChangeDrodown(3,item.id, item.courseId,item.name,item.grade,item.status)">{{ item.name }}</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                            <div class="jx-index-banner-text-xian"></div>
                            <div class="jx-index-banner-text-item">
                                <span>待审批试卷</span>
                                <p v-if="unreviewedTestPaperCount == 0" v-text="unreviewedTestPaperCount"></p>
                                <el-dropdown trigger="hover" v-if="unreviewedTestPaperCount > 0 && (roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER')">
                                    <span class="el-dropdown-link" v-text="unreviewedTestPaperCount"></span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item v-for="(item, index) in unreviewedTestPaperArr" :key="index" @click.native="ChangeDrodown(4,item.id, item.courseId)">{{ item.name }}</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                        </div>
                    </el-col>

                    <!-- <el-col :span="6">
                        <div class="jx-index-banner-text">
                            <div class="jx-index-banner-text-item">
                                <span>待审批实验报告</span>
                                <p v-if="unreviewedReportCount == 0" v-text="unreviewedReportCount"></p>
                                <el-dropdown trigger="hover" v-if="unreviewedReportCount > 0 && (roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER')">
                                    <span class="el-dropdown-link" v-text="unreviewedReportCount"></span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item v-for="(item, index) in unreviewedReportArr" :key="index" @click.native="ChangeDrodown(3,item.id, item.courseId,item.name,item.grade,item.status)">{{ item.name }}</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                            <div class="jx-index-banner-text-xian"></div>
                            <div class="jx-index-banner-text-item">
                                <span>待审批试卷</span>
                                <p v-if="unreviewedTestPaperCount == 0" v-text="unreviewedTestPaperCount"></p>
                                <el-dropdown trigger="hover" v-if="unreviewedTestPaperCount > 0 && (roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER')">
                                    <span class="el-dropdown-link" v-text="unreviewedTestPaperCount"></span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item v-for="(item, index) in unreviewedTestPaperArr" :key="index" @click.native="ChangeDrodown(4,item.id, item.courseId)">{{ item.name }}</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                        </div>
                    </el-col> -->
                </el-row>
                <el-row v-else-if="roles == 'STUDENT'">
                    <el-col :span="12">
                        <div class="jx-index-banner-content">
                            <div class="jx-index-banner-content-avatar fl">
                                <img :src="avatar" />
                            </div>
                            <div class="jx-index-banner-content-tips fl">{{ timeStr }}，{{ userName }}，祝你开心每一天！</div>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="jx-index-banner-text">
                            <div class="jx-index-banner-text-item pinter">
                                <span>正在学习课程</span>
                                <p v-text="studiedCourseNum"></p>
                            </div>
                            <div class="jx-index-banner-text-xian"></div>
                            <div class="jx-index-banner-text-item pinter">
                                <span>实验总时长</span>
                                <p v-html="experimentTime"></p>
                            </div>
                            <div class="jx-index-banner-text-xian"></div>
                            <div class="jx-index-banner-text">
                                <div class="jx-index-banner-text-item pinter">
                                    <span>已提交作业数量</span>
                                    <p v-text="submittedExercisesNum"></p>
                                </div>
                                <div class="jx-index-banner-text-xian"></div>
                                <div class="jx-index-banner-text-item pinter">
                                    <span>已提交报告数量</span>
                                    <p v-text="submittedReportNum"></p>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="jx-index-content">
            <div class="jx-index-tab">
                <el-tooltip class="item" effect="dark" v-for="(item, index) in internetData" :key="index" :content="item.remark" placement="bottom">
                    <el-button :class="{ active : tabActive == index }" @click="tabActiveFn(item, index)">{{ item.keyValue }}</el-button>
                </el-tooltip>
            </div>
            <div>
                <!-- 核心课程 -->
                <div class="jx-content-title" style="margin-top:70px">
                    <div class="jx-content-title-hd">
                        <h1>
                            <p>MAIN COURSE</p>
                        </h1>
                    </div>
                    <span>核心课程</span>
                </div>
                <div class="jx-course-list" :class="{ 'jx-course-list-login': roles}" v-if="coreCoursesListArr.length>0">
                    <el-carousel :indicator-position="coreCoursesListArr.length>1?'outside':'none'" :autoplay="false" ref="carouselList" :height="carouselListHeight" arrow="never">
                        <el-carousel-item v-for="(item, index) in coreCoursesListArr.length" :key="index">
                            <el-row :gutter="40">
                                <el-col :span="6" v-for="(item2, index2) in coreCoursesListArr[index]" :key="index2">
                                    <div class="jx-course-box" :class="{bgImg2:index2%2===0,bgImg:index2%2===1}">
                                        <img class="iconPath" :src="item2.iconPath" @click.stop="goDetail(item2.id)">
                                        <div class="mask" @click.stop="goDetail(item2.id)"></div>
                                        <img class='studtntCourse' src="../../assets/images/peopleHas.png" v-if=" item2.ownCourse" />
                                        <!--yx注释<img class="iconPath-fan" :src="item2.iconPath+'.fan.png'"  @click="goDetail(item2.id)"> -->
                                        <el-tooltip class="item" effect="dark" v-if="(roles == 'TEACHER' || roles == 'MARKET_TEACHER' ||  roles == 'UNIVERSITY_TEACHER') && item2.ownCourse" content="教学课程" placement="bottom">
                                            <!-- yx注释<i class="iconfont icon-wode"></i> -->
                                            <img class='studtntImg' src="../../assets/images/peopleIndex.png" />
                                        </el-tooltip>
                                        <el-tooltip class="item" effect="dark" v-if="roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER'" content="添加班级" placement="bottom">
                                            <!-- yx注释<i class="iconfont icon-tianjia-" @click="addClass(item2.id)"></i>  -->
                                            <img class='addClassImg' src="../../assets/images/addIndex.png" @click="addClass(item2.id)" />
                                        </el-tooltip>
                                        <el-tooltip class="item" effect="dark" v-if="roles == 'STUDENT' && item2.ownCourse" content="学习课程" placement="bottom">
                                            <!-- <i class="iconfont icon-wode"></i> -->
                                            <img class='s-Img' src="../../assets/images/peopleHas.png" />

                                        </el-tooltip>
                                        <!-- <i class="iconfont icon-tianjia-" @click="addClass(item2.id)" v-if="roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER'"></i> -->
                                    </div>
                                    <div class="jx-course-text-title" v-text="item2.name" @click="goDetail(item2.id)"></div>
                                    <div class="jx-course-text" v-if="roles" @click="goDetail(item2.id)">{{item2.userName}}
                                        <span v-if="item2.studied"> ( 已学习 )</span>
                                    </div>
                                    <div class="jx-course-text" v-if="item2.statusValue != null" @click="goDetail(item2.id)">(未购买)</div>
                                </el-col>
                            </el-row>
                        </el-carousel-item>
                    </el-carousel>
                    <button class="jx-course-list-button prev" v-if="coreCoursesListArr.length > 1" :style="{ 'top': courseBtnHeight }" @click="coreCoursesListPrev">
                        <i class="iconfont icon-xiangzuo-copy"></i>
                    </button>
                    <button class="jx-course-list-button next" v-if="coreCoursesListArr.length > 1" :style="{ 'top': courseBtnHeight }" @click="coreCoursesListNext">
                        <i class="iconfont icon-xiangyou"></i>
                    </button>
                </div>
                <div class="jx-course-tips" v-else>
                    <img src="./../../assets/images/index_no_data.png" />
                    <span>暂无核心课程~</span>
                </div>
                <!-- 核心课程 -->
                <!-- 扩展课程 -->
                <div class="jx-content-title">
                    <div class="jx-content-title-hd" style="width:558px;">
                        <h1>
                            <p>EXTENDED COURSE</p>
                        </h1>
                    </div>
                    <span>扩展课程</span>
                </div>
                <div class="jx-course-list" :class="{ 'jx-course-list-login': roles}" v-if="expandCoursesListArr.length>0">
                    <el-carousel :indicator-position="expandCoursesListArr.length>1?'outside':'none'" :autoplay="false" ref="expandList" :height="expandListHeight" arrow="never">
                        <el-carousel-item v-for="(item, index) in expandCoursesListArr.length" :key="index">
                            <el-row :gutter="40">
                                <el-col :span="6" v-for="(item2, index2) in expandCoursesListArr[index]" :key="index2">
                                    <div class="jx-course-box" :class="{bgImg2:index2%2===0,bgImg:index2%2===1}">
                                        <img class="iconPath" :src="item2.iconPath" @click="goDetail(item2.id)">
                                        <div class="mask" @click.stop="goDetail(item2.id)"></div>
                                        <img class='studtntCourse' src="../../assets/images/peopleHas.png" v-if=" item2.ownCourse" />
                                        <!-- <img class="iconPath-fan" :src="item2.iconPath+'.fan.png'"  @click="goDetail(item2.id)"> -->
                                        <el-tooltip class="item" effect="dark" v-if="(roles == 'TEACHER' || roles == 'MARKET_TEACHER' ||  roles == 'UNIVERSITY_TEACHER') && item2.ownCourse" content="教学课程" placement="bottom">
                                            <!-- <i class="iconfont icon-wode"></i> -->
                                            <img class='studtntImg' src="../../assets/images/peopleIndex.png" />
                                        </el-tooltip>
                                        <el-tooltip class="item" effect="dark" v-if="roles == 'STUDENT' && item2.ownCourse" content="学习课程" placement="bottom">
                                            <img class='studtntImg leftsImg' src="../../assets/images/peopleIndex.png" />
                                        </el-tooltip>
                                        <el-tooltip class="item" effect="dark" v-if="roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER'" content="添加班级" placement="bottom">
                                            <!-- <i class="iconfont icon-tianjia-" @click="addClass(item2.id)"></i> -->
                                            <img class='addClassImg' src="../../assets/images/addIndex.png" @click="addClass(item2.id)" />
                                        </el-tooltip>
                                        <!-- <i class="iconfont icon-tianjia-" @click="addClass(item2.id)" v-if="roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER'"></i> -->
                                    </div>
                                    <div class="jx-course-text-title" v-text="item2.name" @click="goDetail(item2.id)"></div>
                                    <div class="jx-course-text" v-if="roles" @click="goDetail(item2.id)">{{item2.userName}}
                                        <span v-if="item2.studied"> ( 已学习 )</span>
                                    </div>
                                    <div class="jx-course-text" v-if="item2.statusValue != null" @click="goDetail(item2.id)">(未购买)</div>
                                </el-col>
                            </el-row>
                        </el-carousel-item>
                    </el-carousel>
                    <button class="jx-course-list-button prev" v-if="expandCoursesListArr.length > 1" :style="{ 'top': expandBtnHeight }" @click="expandListPrev">
                        <i class="iconfont icon-xiangzuo-copy"></i>
                    </button>
                    <button class="jx-course-list-button next" v-if="expandCoursesListArr.length > 1" :style="{ 'top': expandBtnHeight }" @click="expandListNext">
                        <i class="iconfont icon-xiangyou"></i>
                    </button>
                </div>
                <div class="jx-course-tips" v-else>
                    <img src="./../../assets/images/index_no_data.png" />
                    <span>暂无扩展课程~</span>
                </div>
                <!-- 扩展课程 -->
            </div>
            <!-- 互联网核心课程 -->
            <!-- 互联网核心课程 -->
            <div class="jx-content-title">
                <div class="jx-content-title-hd" style=" width: 778px;">
                    <h1>
                        <p>BIG DATA TECHNOLOGY LIBRARY</p>
                    </h1>
                </div>
                <span>大数据技术库</span>
            </div>
            <div class="jx-course-list2" v-if="technologiesListArr.length > 0">
                <el-carousel :indicator-position="technologiesListArr.length > 1?'outside':'none'" :autoplay="false" ref="technologiesList" :height="technologiesListHeight" arrow="never">
                    <el-carousel-item v-for="(item, index) in technologiesListArr.length" :key="index">
                        <el-row :gutter="20">
                            <el-col :span="4" v-for="(item2, index2) in technologiesListArr[index]" :key="index2">
                                <div class="jx-course-box" @click="goSkillLibrary(item2.id)">
                                    <div class="jx-course-box-title" v-text="item2.name"></div>
                                    <div class="jx-course-box-num" v-text="item2.useNum"></div>
                                </div>
                            </el-col>
                        </el-row>
                    </el-carousel-item>
                </el-carousel>
                <button class="jx-course-list-button prev" v-if="technologiesListArr.length > 1" :style="{ 'top': technologiesBtnHeight }" @click="technologiesPrev">
                    <i class="iconfont icon-xiangzuo-copy"></i>
                </button>
                <button class="jx-course-list-button next" v-if="technologiesListArr.length > 1" :style="{ 'top': technologiesBtnHeight }" @click="technologiesNext">
                    <i class="iconfont icon-xiangyou"></i>
                </button>
            </div>
            <div class="jx-course-tips" v-else>
                <img src="./../../assets/images/index_no_data.png" />
                <span>暂无大数据技术库~</span>
            </div>
            <div class="jx-content-title">
                <div class="jx-content-title-hd" style=" width: 787px;">
                    <h1>
                        <p>BIG DATA INDUSTRY CASELIBRARY</p>
                    </h1>
                </div>
                <span>大数据行业案例库</span>
            </div>
            <div class="jx-course-list3" v-if="businessCaseListArr.length > 0">
                <el-carousel :indicator-position="businessCaseListArr.length >1?'outside':'none'" :autoplay="false" ref="businessCaseList" height="190px" arrow="never">
                    <el-carousel-item v-for="(item, index) in businessCaseListArr.length" :key="index">
                        <el-row :gutter="20">
                            <el-col :span="4" v-for="(item2, index2) in businessCaseListArr[index]" :key="index2">
                                <div class="jx-course-box" @click="detailFn(item2.businessCaseId,item2.businessCaseName)">
                                    <div class="jx-course-box-img">
                                        <img class="iconPath-fan" :src="item2.businessCaseIcon+'.fan.png'" />
                                        <img class="iconPath" :src="item2.businessCaseIcon" />
                                    </div>
                                    <div class="jx-course-box-text" v-text="item2.businessCaseName"></div>
                                    <div class="jx-course-box-num" v-text="item2.caseNum"></div>
                                </div>
                            </el-col>
                        </el-row>
                    </el-carousel-item>
                </el-carousel>
                <button class="jx-course-list-button prev" v-if="businessCaseListArr.length > 1" @click="businessCasePrev">
                    <i class="iconfont icon-xiangzuo-copy"></i>
                </button>
                <button class="jx-course-list-button next" v-if="businessCaseListArr.length > 1" @click="businessCaseNext">
                    <i class="iconfont icon-xiangyou"></i>
                </button>
            </div>
            <div class="jx-course-tips" v-else>
                <img src="./../../assets/images/index_no_data.png" />
                <span>暂无大数据行业案例库~</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            bannerList: [
                {
                    bg:"banner-1",
                    item:"banner-1-item",
                },
                {
                    bg:"banner-2",
                    item:"banner-2-item",
                },
                {
                    bg:"banner-3",
                    item:"banner-3-item",
                },
            ],
            // 登录角色 ''未登录 TEACHER 教师 ADMIN管理员 STUDENT学生
            roles: "",

            // 当前教授班级
            classesCount: "",
            classesSelectArr: [],
            // 待审批随堂练习
            unreviewedPracticeCount: "",
            // 待审批随堂练习集合
            unreviewedPracticeArr: [],
            // 待审批实验报告
            unreviewedReportCount: "",
            unreviewedReportArr: [],
            // 待审批试卷
            unreviewedTestPaperCount: "",
            unreviewedTestPaperArr: [],
            // banner信息集合
            coreCoursesArr: "",
            // 时间字段 早安
            timeStr: "",
            // 用户名
            userName: "",
            // 头像
            avatar: "",
            // 已学习课程数
            studiedCourseNum: "",
            // 实验总时长
            experimentTime: "",
            // 已提交作业数量
            submittedExercisesNum: "",
            // 已提交报告数量
            submittedReportNum: "",
            // 核心课程集合
            coreCoursesListArr: [],
            // 核心课程列表高度
            carouselListHeight: "",
            // 核心课程翻页top
            courseBtnHeight: "",
            // 扩展课程集合
            expandCoursesListArr: [],
            // 扩展课程列表高度
            expandListHeight: "",
            // 核心课程翻页top
            expandBtnHeight: "",
            // 大数据技术库集合
            technologiesListArr: [],
            // 大数据技术库列表高度
            technologiesListHeight: "",
            // 大数据技术库翻页top
            technologiesBtnHeight: "",
            // 行业案例集合
            businessCaseListArr: [],
            //判断是否是谷歌浏览器
            flag: "",
            //下载链接
            path: "",

            //tab切换index
            tabActive: '0',
            internetStatus: '',
            internetData: ''
        };
    },
    created() {
        let self = this;
        //登录角色 ''未登录 TEACHER 教师 ADMIN管理员 STUDENT学生
        self.roles = self.$store.state.user.roles[0];
        // 从状态管理获取头像
        self.avatar = self.$store.state.user.avatar;
        //首页数据初始化
        self.indexInit();
        //判断是否是谷歌浏览器
        self.checkBrowser();
    },
    methods: {
        //判断是否是谷歌浏览器
        checkBrowser() {
            let ua = navigator.userAgent.toLocaleLowerCase();
            if (ua.match(/chrome/) != null) {
                //是谷歌浏览器
                this.flag = false;
            } else {
                //不是谷歌浏览器
                this.flag = true;
            }
        },
        //下载谷歌浏览器
        downsPath() {
            let self = this;
            self.$http.get("/tes/unauthorized/config?keys=browserVersion").then(response => {
                let res = response.data;
                if (res.code == "200") {
                    self.path = res.data.browserVersion[0].keyValuePath;
                    // let downloadElement = document.createElement('a');
                    // downloadElement.style.display = 'none';
                    // downloadElement.href =  self.path
                    // downloadElement.click(); //点击下载
                    //document.body.removeChild(downloadElement); //下载完成移除元素
                    var a = document.createElement("a");
                    a.href = self.path;
                    $("body").append(a); // 修复firefox中无法触发click
                    a.click();
                    $(a).remove();
                    self.flag = false;
                } else {
                    self.$message.error(res.message);
                }
            });
        },
        //首页数据初始化
        indexInit() {
            let self = this;
            self.$http.get("/tes/unauthorized/index").then(response => {
                let res = response.data;
                if (res.code == 200) {
                    //判断当前角色 教师显拉取教师信息 学生拉取学生信息
                    if (self.roles == "TEACHER" || self.roles == "MARKET_TEACHER" || self.roles == "UNIVERSITY_TEACHER") {
                        self.classesCount = res.data.classes.count; //当前教授班级
                        self.unreviewedPracticeCount = res.data.unreviewedPractice.count; //待审批随堂练习
                        self.unreviewedReportCount = res.data.unreviewedReport.count; //待审批实验报告
                        self.unreviewedTestPaperCount = res.data.unreviewedTestPaper.count; //待审批试卷
                        self.classesSelectArr = res.data.classes.classes;
                        self.unreviewedPracticeArr = res.data.unreviewedPractice.classes; // 待审批随堂练习集合
                        self.unreviewedReportArr = res.data.unreviewedReport.classes; // 待审批实验报告集合
                        self.unreviewedTestPaperArr = res.data.unreviewedTestPaper.classes; // 待审批试卷集合
                    } else if (self.roles == "STUDENT") {
                        self.studiedCourseNum = res.data.studiedCourseNum; //已学习课程
                        //self.experimentTime = res.data.experimentTime   //实验总时长
                        //yx修改时间形式
                        self.experimentTime = res.data.experimentTime
                            .replace(/D/, "<font size='3'> 天 </font>")
                            .replace(/H/, "<font size='3'> 时 </font>")
                            .replace(/S/, "<font size='3'> 秒 </font>")
                            .replace(/M/, "<font size='3'> 分 </font>");
                        self.submittedExercisesNum = res.data.submittedExercisesNum; //已提交作业数量s
                        self.submittedReportNum = res.data.submittedReportNum; //已提交报告数量
                    }
                    self.coreCoursesArr = res.data.coreCourses; //banner信息集合
                    self.timeStr = res.data.timeStr; //时间字段 早安
                    self.userName = res.data.userName; //用户名
                    if (typeof res.data.technologies == "undefined") {
                        self.technologiesListArr = [];
                    } else {
                        self.technologiesListArr = res.data.technologies; //大数据技术库
                    }
                    self.businessCaseListArr = res.data.businessCase; //行业案例
                    if (self.roles) {
                        //大数据技术库
                        if (self.technologiesListArr.length > 0) {
                            if (self.technologiesListArr.length == 1 && self.technologiesListArr[0].length <= 6) {
                                self.technologiesListHeight = "160px";
                                self.technologiesBtnHeight = "50px";
                            } else {
                                self.technologiesListHeight = "350px";
                                // self.expandBtnHeight = '168px'
                            }
                        }
                    } else {
                        //大数据技术库
                        if (self.technologiesListArr.length != "undefined") {
                            if (self.technologiesListArr.length == 1 && self.technologiesListArr[0].length <= 6) {
                                self.technologiesListHeight = "160px";
                                self.technologiesBtnHeight = "50px";
                            } else {
                                self.technologiesListHeight = "350px";
                                self.technologiesBtnHeight = "140px";
                            }
                        }
                    }
                    if(res.data.internet){
                        self.internetStatus = res.data.internet
                        self.internetData = res.data.internetData
                        self.initInternet(res.data.internetData[0].id)
                    }else{
                        if (typeof res.data.coreCourses == "undefined") {
                            self.coreCoursesListArr = [];
                        } else {
                            self.coreCoursesListArr = res.data.coreCourses; //核心课程
                        }
                        if (typeof res.data.expandCourses == "undefined") {
                            self.expandCoursesListArr = [];
                        } else {
                            self.expandCoursesListArr = res.data.expandCourses; //扩展课程
                        }
                        if (self.roles) {
                            // self.listHeight1 = '440px'
                            //核心课程
                            if (self.coreCoursesListArr.length > 0) {
                                if (self.coreCoursesListArr.length == 1 && self.coreCoursesListArr[0].length <= 4) {
                                    self.carouselListHeight = "213px";
                                    self.courseBtnHeight = "50px";
                                } else {
                                    self.carouselListHeight = "418px";
                                    self.courseBtnHeight = "158px";
                                }
                            }
                            //扩展课程
                            if (self.expandCoursesListArr.length > 0) {
                                if (self.expandCoursesListArr.length == 1 && self.expandCoursesListArr[0].length <= 4) {
                                    self.expandListHeight = "213px";
                                    self.expandBtnHeight = "50px";
                                } else {
                                    self.expandListHeight = "418px";
                                    self.expandBtnHeight = "168px";
                                }
                            }
                        } else {
                            //核心课程
                            if (self.coreCoursesListArr != "undefined") {
                                if (self.coreCoursesListArr.length == 1 && self.coreCoursesListArr[0].length <= 4) {
                                    self.carouselListHeight = "213px";
                                    self.courseBtnHeight = "50px";
                                } else {
                                    self.carouselListHeight = "418px";
                                    self.courseBtnHeight = "140px";
                                }
                            }
                            //扩展课程
                            if (self.expandCoursesListArr != "undefined") {
                                if (self.expandCoursesListArr.length == 1 && self.expandCoursesListArr[0].length <= 4) {
                                    self.expandListHeight = "213px";
                                    self.expandBtnHeight = "50px";
                                } else {
                                    self.expandListHeight = "418px";
                                    self.expandBtnHeight = "158px";
                                }
                            }
                        }
                    }
                } else {
                    self.$message.error(res.message);
                }
            }).catch(err => {
                console.log(err);
            });
        },
        // 互联网版本
        initInternet(id){
            let self = this
            self.$http.get('/tes/unauthorized/index-internet?directionId='+id).then(response => {
                let res = response.data
                if(res.code == '200'){
                    if (typeof res.data.coreCourses == "undefined") {
                        self.coreCoursesListArr = [];
                    } else {
                        self.coreCoursesListArr = res.data.coreCourses; //核心课程
                    }
                    if (typeof res.data.expandCourses == "undefined") {
                        self.expandCoursesListArr = [];
                    } else {
                        self.expandCoursesListArr = res.data.expandCourses; //扩展课程
                    }
                    if (self.roles) {
                        //核心课程
                        if (self.coreCoursesListArr.length > 0) {
                            if (self.coreCoursesListArr.length == 1 && self.coreCoursesListArr[0].length <= 4) {
                                self.carouselListHeight = "213px";
                                self.courseBtnHeight = "50px";
                            } else {
                                self.carouselListHeight = "418px";
                                self.courseBtnHeight = "158px";
                            }
                        }
                        //扩展课程
                        if (self.expandCoursesListArr.length > 0) {
                            if (self.expandCoursesListArr.length == 1 && self.expandCoursesListArr[0].length <= 4) {
                                self.expandListHeight = "213px";
                                self.expandBtnHeight = "50px";
                            } else {
                                self.expandListHeight = "418px";
                                self.expandBtnHeight = "168px";
                            }
                        }
                    } else {
                        //核心课程
                        if (self.coreCoursesListArr != "undefined") {
                            if (self.coreCoursesListArr.length == 1 && self.coreCoursesListArr[0].length <= 4) {
                                self.carouselListHeight = "213px";
                                self.courseBtnHeight = "50px";
                            } else {
                                self.carouselListHeight = "418px";
                                self.courseBtnHeight = "140px";
                            }
                        }
                        //扩展课程
                        if (self.expandCoursesListArr != "undefined") {
                            if (self.expandCoursesListArr.length == 1 && self.expandCoursesListArr[0].length <= 4) {
                                self.expandListHeight = "213px";
                                self.expandBtnHeight = "50px";
                            } else {
                                self.expandListHeight = "418px";
                                self.expandBtnHeight = "158px";
                            }
                        }
                    }
                }else{
                    self.$message.error(res.message)
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 核心课程下一页
        coreCoursesListNext() {
            this.$refs.carouselList.next();
        },
        // 核心课程上一页
        coreCoursesListPrev() {
            this.$refs.carouselList.prev();
        },
        // 扩展课程下一页
        expandListNext() {
            this.$refs.expandList.next();
        },
        // 核心课程上一页
        expandListPrev() {
            this.$refs.expandList.prev();
        },
        // 大数据技术库下一页
        technologiesNext() {
            this.$refs.technologiesList.next();
        },
        // 大数据技术库上一页
        technologiesPrev() {
            this.$refs.technologiesList.prev();
        },
        // 行业案例下一页
        businessCaseNext() {
            this.$refs.businessCaseList.next();
        },
        // 行业案例上一页
        businessCasePrev() {
            this.$refs.businessCaseList.prev();
        },
        // 添加班级
        addClass(id) {
            this.$localstorage.putLocalStorage("setCourseId", id);
            this.$router.push({ path: "/Teaching/AddClass" });
        },
        // 跳转详情
        goDetail(courseId) {
            let self = this;
            self.$localstorage.putLocalStorage("setCourseId", courseId);
            // self.$store.dispatch('addCourseId', courseId)
            self.$router.push({ path: "/Teaching/MyCourses/CourseDetail" });
        },
        // 跳转大数据技术库
        goSkillLibrary(skillLibraryId) {
            let self = this;
            // 添加技能Id
            self.$localstorage.putLocalStorage("setSkillLibraryId", skillLibraryId);
            self.$router.push({ path: "/Teaching/MyCourses/SkillLibrary" });
        },
        //大数据行业案例
        detailFn(caseId, businessCaseName) {
            this.$router.push({
                path: "/Teaching/CasePresentation",
                query: { id: caseId, csaeName: businessCaseName }
            });
        },
        // 切换首页下拉
        // index: 1.当前教授班级 2.待审批随堂练习 3.待审批实验报告 4.待审批试卷
        // classID 班级id
        // courseID 课程iD
        ChangeDrodown(index, classID, courseID, name, grade, status) {
            let self = this;
            //当前教授班级
            self.$localstorage.putLocalStorage("setCourseId", courseID);
            if (index == 1) {
                self.$router.push({
                path: "/Teaching/MyCourses/Management/ManageClass/ManageStudent",
                query: {
                    id: classID
                }
                });
            } else if (index == 2) {
                //yx修改
                self.$router.push({
                path: "/Teaching/MyCourses/marking",
                query: {
                    classArr: status + "-" + grade + "-" + name //是随堂练习
                }
                });
            } else if (index == 3) {
                //yx修改
                self.$router.push({
                path: "/Teaching/MyCourses/marking",
                query: {
                    reportArr: status + "-" + grade + "-" + name //实验报告
                }
                });
            } else if (index == 4) {
                self.$router.push({
                path: "/Teaching/MyCourses/Examination/TestPaper/ExaminationList"
                });
            }
        },
        //tab切换
        tabActiveFn(item, index){
            let self = this
            self.tabActive = index
            self.initInternet(item.id)
        }
    }
};
</script>
<style scoped>
.leftsImg {
  left: 14px !important;
}
.pinter {
  cursor: unset !important;
}
/* 重置轮播按钮样式 */
.el-carousel {
  overflow-y: hidden;
}
.el-carousel >>> .el-carousel__indicators--outside {
  margin-top: 10px;
}
.el-carousel >>> .el-carousel__button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.el-carousel >>> .el-carousel__indicators--outside button {
  background-color: #d7d7d7;
}
.el-dropdown-link {
  width: 100% !important;
  display: inline-block !important;
}
.bgImg {
  background: url("../../assets/images/indexBg.png") no-repeat;
  width: 230px;
  border-radius: 6px;
  height: 125px;
  position: relative;
}
.bgImg2 {
  background: url("../../assets/images/indexBg2.png") no-repeat;
  width: 230px;
  border-radius: 6px;
  height: 125px;
  position: relative;
}
</style>
<style lang="scss" scoped>
.jx-index-banner2 {
  width: 100%;
  height: 370px; //yx
  /deep/ .el-carousel {
    .el-carousel__indicators {
      bottom: 100px;
    }
    .el-carousel__button {
      background-color:#e1e1e1;
    }
  }
  .banner2-content {
    width: 100%;
    height: 100%;
    background-size: cover;
    .banner2-item{
        width:1200px;
        height:370px;
        margin:0 auto;
    }
  }
  .banner-1 {
    background: url("../../assets/images/banner-01.jpg") no-repeat 0 0;
  }
  .banner-2 {
    background: url("../../assets/images/banner-02.jpg") no-repeat 0 0;
  }
  .banner-3 {
    background: url("../../assets/images/banner-03.jpg") no-repeat 0 0;
  }
  .banner-1-item {
    background: url("../../assets/images/banner-01-item.png") no-repeat 0 0;
  }
  .banner-2-item {
    background: url("../../assets/images/banner-02-item.png") no-repeat 0 0;
  }
  .banner-3-item {
    background: url("../../assets/images/banner-03-item.png") no-repeat 0 0;
  }
  img {
    width: 100%;
  }
}
.jx-index-banner {
  width: 100%;
  height: 280px; //yx

  img {
    width: 100%;
  }
}
.jx-index-banner-info {
  width: 100%;
  height: 280px; //yx
  background: url("../../assets/images/bgIndex.png") no-repeat;
  .mask {
    background: rgba(0, 0, 0, 0.3);
    padding: 15px 0;
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
    z-index: 9;
    & > p {
      text-align: center;
      color: #fff;
    }
    .wrong {
      margin-left: 35px;
      opacity: 0.6;
      cursor: pointer;
    }
    .downsPath {
      cursor: pointer;
      color: #1277eb;
    }
    &:hover {
      a {
        color: #1277eb;
      }
    }
  }
  .jx-index-banner-info-box {
    width: 1200px;
    margin: 0 auto;
    .jx-index-banner-text {
      // width: 483px; //yx
      margin: 80px auto 0; //yx
      .jx-index-banner-text-xian {
        float: left;
        width: 1px;
        height: 32px;
        background: rgba(255, 255, 255, 0.5);
        margin: 10px 18px 0;
      }
      .jx-index-banner-text-item {
        float: left;
        color: #e8e8e8;
        text-align: center;
        cursor: pointer;
        span {
          font-size: 14px;
          //margin-top: -6px;
        }
        p {
          margin-top: 10px;
          font-size: 26px;
        }
        .el-dropdown {
          margin-top: 10px;
          span {
            font-size: 26px;
            color: #e8e8e8;
          }
        }
        &:hover {
          //color: #e8e8e8;
          color: #fff;
          .el-dropdown {
            span {
              color: #fff;
            }
          }
        }
      }
    }
    .jx-index-banner-content {
      margin-left: 38px;
      .jx-index-banner-content-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50px;
        overflow: hidden;
        margin: 70px auto 0;
        img {
          width: 100%;
        }
      }
      .jx-index-banner-content-tips {
        font-size: 22px;
        color: #fff;
        text-align: center;
        margin-top: 90px;
        margin-left: 20px;
      }
    }
  }
}
.jx-index-content {
    position: relative;
    z-index: 2;
    overflow: hidden;
    width: 1200px;
    margin: -90px auto 98px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 3px 0 21px rgba(0, 0, 0, 0.13);
    .jx-index-tab{
        position: absolute;
        right: 30px;
        top: 30px;
        .el-button{
            padding: 6px 10px;
            border-radius: 0;
            &.active{
                color: #1277eb;
                border-color: #1277eb;
                background: none;
            }
            &:active, &:focus{
                color: #1277eb;
                border-color: #1277eb;
                background: none;
            }
            &:hover{
                color: #1277eb;
                border-color: #1277eb;
                background: none;
            }
        }
    }
    .jx-content-title {
        margin-top: 10px;
        .jx-content-title-hd {
        width: 484px;
        margin: 0 auto;
        border-top: 1px solid #cfcfcf;
        h1 {
            font-size: 16px;
            margin: -18px auto 0;
            padding: 0 40px;
            background-color: #fff;
            display: table;
            p {
            display: inline-block;
            width: 100%;
            height: 100%;
            font-size: 30px;
            color: rgba(171, 171, 171, 0.3);
            font-weight: 100;
            }
        }
        }
        span {
        font-weight: 500;
        display: block;
        margin-top: 10px;
        text-align: center;
        font-size: 20px;
        color: #474747;
        }
    }

    .jx-course-list-button {
        position: absolute;
        cursor: pointer;
        &.prev {
        left: -80px;
        }
        &.next {
        right: -80px;
        }
        i {
        font-size: 44px;
        color: #d9d9d9;
        }
        &:hover {
        i {
            color: #757575;
        }
        }
    }
    .jx-course-list {
        position: relative;
        width: 1000px;
        margin: 34px auto 0;
        padding-bottom: 20px;
        .jx-course-text-title {
        text-align: center;
        font-size: 16px;
        color: #323232;
        margin-top: 22px;
        //yx溢出串版 加上省略号
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        }
        &.jx-course-list-login {
        .jx-course-list-button {
            top: 168px;
        }
        }
        .el-col {
        margin-bottom: 36px;
        .addClassImg {
            position: absolute;
            left: 14px;
            bottom: 14px;
            width: 24px;
            height: 24px;
            display: inline-block;
            display: none;
            z-index: 999;
        }
        .studtntImg {
            position: absolute;
            left: 44px;
            bottom: 14px;
            width: 24px;
            height: 24px;
            display: inline-block;
            display: none;
            z-index: 999;
        }
        .s-Img {
            position: absolute;
            left: 14px;
            bottom: 14px;
            width: 24px;
            height: 24px;
            display: inline-block;
            display: block;
            z-index: 999;
        }
        .studtntCourse {
            position: absolute;
            left: 14px;
            bottom: 14px;
            width: 24px;
            height: 24px;
            display: inline-block;
            z-index: 999;
        }
        .mask {
            background: #000;
            position: absolute;
            left: 0px;
            top: 0;
            width: 230px;
            height: 130px;
            opacity: 0.2;
            border-radius: 5px;
            display: none;
        }
        &:hover {
            .jx-course-box {
            cursor: pointer;
            i {
                color: #ff0000;
            }
            .addClassImg {
                display: block;
            }
            .studtntImg {
                display: block;
            }
            .studtntCourse {
                display: none;
            }
            .mask {
                display: block;
            }
            .s-Img {
                display: block;
            }
            }
        }
        }
        .jx-course-box {
        position: relative;
        width: 100%;
        height: 130px;
        line-height: 130px;
        // background: #3e4562;
        border-radius: 5px;
        text-align: center;
        // box-shadow: 8px 0 20px rgba(0, 0, 0, .44);
        overflow: hidden;
        i {
            position: absolute;
            line-height: 1;
            right: 12px;
            color: #fff;
            cursor: pointer;
            display: none;
            &.icon-wode {
            top: 14px;
            }
            &.icon-tianjia- {
            bottom: 10px;
            }
        }
        img {
            width: 100%;
            transition: transform 0.6s;
        }
        // .iconPath-fan{
        //     display: none;
        // }
        &:hover {
            i {
            display: block;
            }
            .iconPath {
            // display: none;
            transform: scale(1.05);
            transition: transform 0.6s;
            }
            // .iconPath-fan{
            //     display: inline-block;
            // }
        }
        }
        .jx-course-text {
        text-align: center;
        font-size: 12px;
        color: #888;
        margin-top: 10px;
        }
        .jx-course-list-button {
        top: 135px;
        }
    }
    .jx-course-list2 {
        position: relative;
        width: 1000px;
        margin: 42px auto 0;
        padding-bottom: 10px;
        .el-row {
        height: 160px;
        .el-col {
            height: 100%;
            margin-bottom: 20px;
        }
        }
        .jx-course-box {
        position: relative;
        width: 100%;
        height: 100%;
        border: dashed 1px #bfbfbf;
        box-sizing: border-box;
        background: #f9f9f9;
        cursor: pointer;
        text-align: center;
        transition: 0.3s;
        &:hover {
            border: solid 1px #485f8c;
            background: #fff;
            .jx-course-box-title {
            color: #385899;
            }
            .jx-course-box-num {
            color: #385899;
            border-top: solid 1px #385899;
            }
        }
        .jx-course-box-title {
            font-size: 16px;
            color: #545454;
            margin-top: 45px;
            line-height: 1.2;
            padding: 0 5px;
        }
        .jx-course-box-num {
            font-size: 16px;
            color: #545454;
            width: 48px;
            border-top: solid 1px #545454;
            padding-top: 20px;
            margin: 24px auto 0;
        }
        }
        .jx-course-list-button {
        top: 115px;
        }
    }
    .jx-course-list3 {
        position: relative;
        width: 1000px;
        margin: 50px auto 0;
        padding-bottom: 80px;
        .el-row {
        height: 100%;
        .el-col {
            height: 100%;
        }
        }
        .jx-course-box {
        position: relative;
        width: 100%;
        height: 100%;
        border: solid 1px #bfbfbf;
        box-sizing: border-box;
        background: #fff;
        border-radius: 5px;
        cursor: pointer;
        transition: 0.5s;
        .iconPath {
            display: none;
        }
        .jx-course-box-img {
            width: 54px;
            height: 46px;
            line-height: 46px;
            text-align: center;
            margin: 38px auto 0;
            img {
            width: 100%;
            }
        }
        .jx-course-box-text {
            margin-top: 22px;
            padding: 0 20px;
            font-size: 16px;
            height: 20px;
            line-height: 20px;
            color: #3e4562;
            text-align: center;
            /* font-weight: bold; */
            word-break: break-all;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
        }
        .jx-course-box-num {
            margin-top: 18px;
            text-align: center;
            font-size: 16px;
            color: #3e4562;
        }
        &:hover {
            border: solid 1px #485f8c;
            background: #485f8c;
            .iconPath {
            display: inline-block;
            }
            .iconPath-fan {
            display: none;
            }
            .jx-course-box-num,
            .jx-course-box-text {
            color: #fff;
            }
        }
        }
        .jx-course-list-button {
        top: 70px;
        }
    }
    // 首页暂无数据提示
    .jx-course-tips {
        text-align: center;
        margin: 110px 0 170px;
        span {
        display: block;
        margin-top: 45px;
        font-size: 18px;
        }
    }
}
</style>
